
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>YUI 2 in 3</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>


<!--begin custom header content for this example-->
<style type="text/css" id="styleoverrides">
#cal1Cont {
    background-color:#004C6D;
    width: 200px;
}
#cal1Cont table tr {
    background-color:#004C6D;
}

#cal1Cont div.calheader {
    cursor: move;
}

#cal1Cont .yui3-calendar {
    width:auto;
    background-color:transparent;
}

#cal1Cont .yui3-calendar tr, #cal1Cont .yui3-calendar th {
    background-color:transparent;
    vertical-align:middle;
    text-transform:none;
    color:#fff;
}

#cal1Cont .yui3-calendar a:hover {
    text-decoration:none;
}

#results {
    background-color:#8DD5E7;
    border:1px solid black;
    position: absolute;
    top: 15px;
    right: 5px;
    width: 300px;
}
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>YUI 2 in 3</h1>

<div class="exampleIntro">
	<p>This example shows how to use YUI 2.x and 3.x at the same time as well as interacting with each other.
We will make a 2.x Calendar Control draggable with 3.x Drag &amp; Drop and use 3.x's Node to handle the Calendar's Select Event.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="cal1Cont"></div>
<div id="results">Click a date..</div>

<script>

YUI({filter:"debug", logInclude: {"example":true}}).use('dd-drag', 'yui2-calendar', 'yui2-logger', function(Y) {

    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2,
    setupDD = function() {
        var dd = new Y.DD.Drag({
            node: '#cal1Cont'
        }).addHandle('div.calheader');

        cal1.renderEvent.unsubscribe(setupDD);
    },
    cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
    
    cal1.renderEvent.subscribe(setupDD);
    
    cal1.selectEvent.subscribe(function(e, dates) {
        var d = dates[0][0],
            dateStr = d[1] + '/' + d[2] + '/' + d[0];

        Y.one('#results').setContent('You clicked on: ' + dateStr);
    });
    cal1.render();
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
